<template>
    <div id="app">
        <video muted='muted' loop='loop' autoplay='autoplay' src="../.././assets/video/1.mp4"></video>
        <!-- <video muted='muted' loop='loop' autoplay='autoplay' src="../.././assets/video/2.mp4"></video> -->
        <!-- <video muted='muted' loop='loop' autoplay='autoplay' src="../.././assets/video/3.mp4"></video> -->
        <el-form class="pic" :model="loginForm" ref="loginForm" status-icon :rules="rules">
        <!-- <div class="pic"  :model="loginForm" ref="loginForm" status-icon :rules="rules"> -->
            <h1 v-text="title" :class="ssd"></h1>           
			<!-- 一开始是二维码角标,点击之后变成电脑角标,再次点击又切换 -->
            <i @click="isErweiLogin=!isErweiLogin,isSmsLogin=false" :class="['saoma','iconfont',jiaobiao]"></i>
            
			<!-- 切换二维码登入的控制条件isErweiLogin -->
            <!-- 用户常规登入 -->
            <div class="login" v-if="!isErweiLogin && !isSmsLogin">
                <el-form label-width="100px" class="demo-loginForm" :model="loginForm" ref="loginForm" status-icon :rules="rules">
                    <el-form-item label="用户名" prop="username">
                        <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="captcha">
                        <!-- 记得把v-model.number="loginForm 里面的number删掉，不删掉获取不到验证码 -->
                        <el-input maxlength='5' v-model="loginForm.captcha" class="msg" @keydown.native.enter="submitForm('loginForm')"></el-input> 
                        <span class="captcha-svg"  v-loading="loading">
                            <i @click="updateCaptcha"  v-html="captchaSvg"></i>
                        </span>   
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')">登入</el-button>
                    </el-form-item>

                    <!-- 点击手机短信登入 -->
                    <el-form-item>
                        <div class="footer">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shouji-iphone12-zhengmian"></use>
                            </svg>
                            <a href="#" @click="isSmsLogin=true">切换短信登入</a>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            
            <!-- 二维码登入 -->
            <div class="erweima" v-else-if="isErweiLogin && !isSmsLogin">
                <div class="img" v-loading="qrLoading">
                    <img :src="imgBase64Url" width="200px" alt="">
                    <i class="mask" :style="qrStyle" v-show="showQrMask" @click="getQrcode"></i>
                </div>
                <p>
                    <svg class="icon weixinpic" aria-hidden="true" style="font-size:22px; margin-right: 5px; vertical-align: -6px;">
                        <use xlink:href="#icon-weixin1"></use>
                    </svg>
                    <b v-text="hint"></b>
                </p>
            </div>

             <!-- 短信验证码登入 -->
            <div class="noteCode" v-else>
                <el-form-item label="手机号">
					<el-input maxlength="11" v-model="phoneNumber" class="captcha phone msg"></el-input>
					<span @click="sendSmsCode" class="captcha-svg" v-text="smsRetryMsg" style="color: #888; line-height: 45px; text-decoration: underline"></span>
				</el-form-item>
				<el-form-item label="验证码">
					<el-input v-model="smsCode"></el-input>
				</el-form-item>
				<el-form-item class="but">
					<el-button type="primary" @click="smsSubmit">提交</el-button>
				</el-form-item>
            </div>
        </el-form>
        <!-- </div> -->
    </div>
</template>


<script>
    // 引入动画.css
    import 'animate.css';

    // 引入api中的方法
    import * as api from "@/api/users";

    // 引入socket.io
    import socketIo from "socket.io-client";

    // 引入生产二维码的插件qrcode
    import qr from 'qrcode';

    // 引入成功和失效的图片
    import successPic from '../../assets/imags/scancode.png'
    import invalidPic from '../../assets/imags/invalidQr.png'

    // 映射vuex
    import {mapMutations} from 'vuex'

    // 校验验证码
    var validateCaptcha = (rule, value, callback) => {
        if (!value) {
          callback('请输入验证码')
        } else {
            callback();
        }
    };
    // 用户名的校验函数
    var validateUsername = (rule, value, callback) => {
        // console.log(value);
        let pattarn = /^[a-zA-Z0-9_-]{4,16}$/;
        if (pattarn.test(value)) {
          callback();   // 不传参就是通过
        } else {
          callback('用户名4到16位（字母，数字，下划线，减号）');
        }
    };
    // 密码校验函数
    var validatePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
    };
    
    export default {
        name:'login',
        data() {
            return {
                ssd:['animate__animated animate__heartBeat animate__delay-0.5s animate__infinite'],   // 动画效果
                smsDisabled:false, // 控制是否能够再次发送
                qrLoading:true,  // 加载二维码的loading动画
                showQrMask:false,// 是否显示二维码遮罩
                smsCode: "", //短信验证码
                smsRetryMsg: "点击发送验证码", //xx秒之后重新发送提示
                phoneNumber: "", //手机号
                title:'用户管理系统',
                captchaSvg:'',  // 验证码svg
                loading:true,  // 验证码加载动画
                isErweiLogin:false,//是否是二维码登入
                hint:"请使用手机微信扫码登入",//切换到二维码登入时的提示文字
                isSmsLogin:false, // 短信登入
                loginForm: {
                    username: '',
                    password: '',
                    captcha: ''
                },
                rules: {
                    // 表单验证
                    username: [
                        { validator: validateUsername, trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePassword, trigger: 'blur' }
                    ],
                    captcha: [
                        { validator: validateCaptcha, trigger: 'blur' }
                    ]
                },
                imgBase64Url: "", //二维码base64的图片地址
                isScanCodeSuccess: false, //是否扫码成功
                // 二维码遮罩图片
                qrStyle:{
                    // backgroundImage:`url(${successPic})`,
                    backgroundImage:`url(${invalidPic})`,
                }
            };
        },
        // 计算属性
        computed:{
            jiaobiao(){
                return this.isErweiLogin
                    ? "icon-diannaojiaobiao"
                    : "icon-erweimajiaobiao";
            }
        },
        created(){
            // 调用获取验证码的方法
            this.updateCaptcha()
        },
        methods: {
            // 映射vuex的mutation
            ...mapMutations(['SET_USERINFO']),

            // 封装短信登入相关方法
            async sendSmsCode(){
                console.log(this.phoneNumber);
                // 判断是否可以发送短信，通过smsDisabled来控制
                if(this.smsDisabled){
                    this.$message.error('一分钟内只能发送一次')
                    return  // 后面的逻辑不执行
                }
                // 获取手机号,传递给后台，调用发送短信的接口
                let smsResult = await api.getSmsCode(this.phoneNumber)
                // 先解构内容
                let {state} = smsResult.data;
                if(state){
                    // 锁住smsDisabled，让短信不能再发送
                    this.smsDisabled = true
                    // 判断发送成功
                    // 提示短信发送成功
                    this.$message.success('短信发送成功')
                    // 短信发送需要进入倒计时
                    this.smsSecond = 60;
                    this.smsInterval = setInterval(()=>{
                        this.smsSecond--;
                        if(this.smsSecond == 0){
                            // 清除定时器=0
                            clearInterval(this.smsInterval);
                            // 提示文字复原
                            this.smsRetryMsg = '点击发送验证码';
                            // 解锁smsDisabled，可以继续发送短信
                            this.smsDisabled = false;
                            return
                        };
                        this.smsRetryMsg = `${this.smsSecond}秒后重新发送`
                    },1000)
                }
                // console.log(smsResult);
            },
            async smsSubmit(){
                // 打开加载动画
                // 按钮权限
                let smsLoginRes = await api.smslogin(this.smsCode)
                console.log(smsLoginRes);
                // 判断登入状态，如果登入成功，将数据存储到本地
                let {userInfo,state,permission:{buttons},token,} = smsLoginRes.data;
                if(state){
                    // localStorage.setItem('ewm-userInfo',JSON.stringify(userInfo))
                    localStorage.setItem('ewm-permission',JSON.stringify(buttons))
                    localStorage.setItem('sw-token',token)

                    // 调用vuex的方法，设置用户信息
                    this.SET_USERINFO(userInfo)

                    // 跳转到欢迎页
                    this.$router.push('/')
                }
            },

            // 封装一个方法，专门用于获取验证码
            updateCaptcha(){
                // 打开加载动画
                this.loading = true;
                api.getCaptcha().then(res=>{
                    // console.log(res);  // 页面加载就打印
                    let {img} = res.data;// 解构验证码
                    this.captchaSvg = img;
                    //关闭加载动画
                    this.loading = false;
                })
            },

            // 常规登入(普通登入方式)
            submitForm(formName) {
                //登入逻辑
                //1.先要进行本地的表单校验

				//2.表单校验通过之后 通过v-model获取输入的username password

				//3.校验验证码

				//4.校验通过之后 发起请求 请求登入接口 传入用户名和密码

				//5.跳转到主页,显示主页
                console.log(this.$refs);
                this.$refs[formName].validate((valid)=>{
                    // console.log(valid);
                    if (valid) {
                        // 打开加载动画
                        const loading = this.$loading({
                            lock: true,
                            text: '拼命加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        setTimeout(() => {
                            
                        }, 2000);
                        // 本地的表单验证通过
                        let {username,password,captcha} = this.loginForm;
                        // 校验验证码
                        api.verifyCaptcha(captcha).then(async(res)=>{
                            // console.log(res);
                            let {state} = res.data  // 解构返回的结果
                            if(state){
                                // 验证码正确
                                let loginRes = await api.login(username,password);
                                // console.log(loginRes);
                                // 按钮权限
                                let {state:loginState,msg,token,userInfo,permission:{buttons}} = loginRes.data  // 解构返回的结果
                                if(loginState){
                                    // 登入成功了跳转页面
                                    // 关闭登入加载动画
                                    loading.close();
                                    // 将token存到localStorage
                                    localStorage.setItem('sw-token',token)
                                    // localStorage.setItem('ewm-userInfo',JSON.stringify(userInfo))
                                    // 将按钮权限存本地
                                    localStorage.setItem('ewm-permission',JSON.stringify(buttons))

                                    // 调用vuex的方法，设置用户信息
                                    this.SET_USERINFO(userInfo)

                                    // 跳转页面
                                    this.$router.push('/')
                                    // 跳转后提示登入成功
                                    this.$message({
                                        message: msg,
                                        type: 'success',
                                        duration: 1500
                                    });
                                }else{
                                    // 登入失败 关闭loading加载动画
                                    loading.close();
                                }
                            }else {
                                // 验证码错误 关闭loading加载动画
                                loading.close();
                                
                                // 刷新验证码
                                this.updateCaptcha();
                            }
                        });
                    } else {
                        // 表单验证不通过
                    }
                });
            },
            resetForm(formName){
                this.$refs[formName].resetFields();
            },

            async getQrcode(sid){
                // 将提示文字变更
                this.hint = "请使用手机微信扫码登入";
                this.title ='微信扫码登入';
                this.ssd = ['animate__animated animate__heartBeat animate__delay-0.5s animate__infinite']

                // 清除上一次二维码图片
                // this.imgBase64Url = "";
                // 先关闭遮罩
                this.showQrMask = false;
                // 再把加载动画打开
                this.qrLoading = true
                // 获取本地存储里的sid，如果本地没有，就去拿后端传过来的sid
                sid = localStorage.getItem('ewm-sid') ?? sid;
                // console.log(sid);
                // 调用接口获取二维码url
                let qrResuit = await api.getQrcode(sid);
                // console.log(qrResuit);
                // 解构scanCodeUrl和后端的状态码
                let {scanCodeUrl,state:getQrState} = qrResuit.data;
                // console.log(scanCodeUrl);
                // 判断服务器状态
                if(getQrState){
                    // 如果请求成功
                    // 使用qrcode插件，将scanCodeUrl变成一个二维码
                    qr.toDataURL(scanCodeUrl,(err,imgBase64Url)=>{
                        if(err){
                            // 错误的情况
                            this.$messageBox.error(err)
                            return
                        }
                        // console.log(imgBase64Url);
                        this.imgBase64Url = imgBase64Url;

                        // 关掉二维码加载动画
                        this.qrLoading = false
                    })
                }
            }
        },
        watch:{
            // 监听切换短信登入逻辑
            isSmsLogin(val){
                // 切换短信提示
                this.title = '短信登入'
                this.ssd = ['animate__animated animate__heartBeat animate__delay-0.5s animate__infinite']
                // 不是短信登录的时候，清除定时器
                if(!val){
                    if(this.smsInterval){
                        clearInterval(this.smsInterval)
                    }
                    
                    // 将短信登入的文字复原
                    this.smsRetryMsg = `点击发送验证码`
                }
            },
            // 监听切换二维码登入的字段
            isErweiLogin(isErwei){
                if(isErwei){
                    // 打开二维码加载动画
                    this.qrLoading = true;

                    // 切换成了二维码登入

                    // 需要把遮罩关掉
                    this.showQrMask = false;

                    // 建立socket连接
                    // https 协议，要使用wss协议
                    let io = socketIo("wss://chst.vip")
                    // 扫码成功
                    io.on('scancodeSuccess',async (data)=>{
                        // console.log(data);
                        // 显示二维码遮罩，并且将背景图片换成扫码成功后二维码遮罩的图片
                        this.showQrMask = true;
                        this.qrStyle.backgroundImage =`url(${successPic})`;
                        // 先解构内容
                        let {state:scanCodeState,wechatCode} = data;
                        if(scanCodeState){
                            // 扫码成功了
                            let scanCodeRes = await api.wechatLogin(wechatCode)
                            // console.log(scanCodeRes);
                            // 解构内容
                            let {state,userInfo,permission:{buttons},token} = scanCodeRes.data;
                            // 把userInfo,permission,token 存本地
                            if(state){
                                localStorage.setItem('ewm-userInfo',JSON.stringify(userInfo))
                                localStorage.setItem('ewm-permission',JSON.stringify(buttons))
                                localStorage.setItem('sw-token',token)

                                // 调用vuex的方法，设置用户信息
                                this.SET_USERINFO(userInfo)

                                // 跳转到欢迎页
                                this.$router.push('/')
                                // 关闭二维码遮罩
                                this.showQrMask = false;
                            }
                        }
                    })

                    // 二维码失效
                    io.on('invalidCode',data=>{
                        // console.log(data);
                        // 解构无效的二维码
                        let {state} = data;
                        if(!state){
                            this.showQrMask = true;
                            // 点击刷新二维码，更改p标签文字
                            this.hint = "二维码失效,请点击刷新重新获取";
                        }
                    })

                    // 连接成功
                    io.on("connectSuccess",async (data)=>{
                        // console.log(data);
                        // 从data中解构sid
                        let {sid} = data;
                        // 将sid 唯一标识存到本地
                        localStorage.setItem("ewm-sid",sid)
                        
                        // 调用获取二维码的方法
                        this.getQrcode(sid)
                    })
                }
            }
        }
    }
</script>

<style lang='less' scoped>
    // 1.找类名
    // 2.看权重   !important
    // 3.看是否使用深度选择器    /deep/;
    
    .el-input{
        width: 250px;
        /deep/.el-input__inner{
            width: 250px;
        }
    }

    /deep/.el-form-item__label{
        color: #fff;
    }
    .el-button{
        width: 250px;
    }

    video{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .pic{
        position: fixed;
        right: 10%;
        top: 25%;
        border-radius: 5px;
        width: 400px;
        background-color: rgba(0,0,0,.3);
        padding: 100px 0 50px 0;
        h1{
            margin: 0 0 60px 0;
            text-align: center;
            color: #fff;
        };
        .saoma {
            font-size: 60px;
            color: #fff;
            position: absolute;
            right: -1px;
            top: -1px;
            cursor: pointer;
            opacity: 0.7;
        }
        i>.icon{
            font-size: 60px;
            color: #fff;
            position: absolute;
            right: -1px;
            top: -1px;
            cursor: pointer;
            opacity: .7;
        };
        .footer{
            font-size: 15px;
            margin-left: 44px;
            // width: 250px;
            .icon {
            width: 2em;
            height: 2em;
            vertical-align: middle;
            fill: currentColor;
            overflow: hidden;
            }
            a{
                display: inline;
                color: rgb(255, 255, 255);
                font-size: 16px;
            }
        }
        .captcha-svg {
            background: #fff;
            display: inline-block;
            height: 45px;
            width: 150px;
            text-align: center;
            cursor: pointer;
            border: 0;
            border-radius: 0 5px 5px 0;
        }
    }
    /deep/.msg{
        width: 100px;
        vertical-align: top;
        .el-input__inner{
            width: 100%;
            height: 45px;
            border-radius: 5px 0 0 5px;
            border: 0;
            font-size: 18px;
        }
    }
    


    //二维码样式
    .erweima {
        text-align: center;
    }
	.erweima .img {
		display: inline-block;
        position: relative;
        width: 200px;
        height: 200px;
		img {
			position: absolute;
			left: 0;
		}
        // 二维码遮盖
		.mask {
			width: 100%;
			height: 100%;
			opacity: 0.8;
			background-color: #fff;
			position: absolute;
			left: 0;
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: center;
			cursor: pointer;
		}
	}
    .erweima>p{
        text-align: center;
        color: #fff;
    }
    .el-button--primary {
        background: linear-gradient(90deg, #1596fb, #002dff);
        width: 250px;
    }



    /deep/.noteCode{
        padding-left: 45px;
        .but{
            padding-left: 53px;
        }
    }
    /deep/.noteCode {
        // padding-right: 20px !important;
        // width: 400px;

        .phone {
            width: 140px !important;
        }

        .captcha-svg{
            width: 105px;
            padding-right: 5px;
        }
    }

    // .weixinpic{
    //     // font-size: 20px;
    //     // padding-right: 5px;
    // }
    
</style>